<template>
  <div class="screen-container scale-80">
    <!-- 顶部标题与时间 -->
    <div class="screen-header">
      <h1 class="screen-title">智能车间生产管控大屏</h1>
      <div class="header-time">
        <span class="date">{{ currentDate }}</span>
        <span class="time">{{ currentTime }}</span>
      </div>
    </div>

    <!-- 主网格布局 -->
    <div class="screen-grid">
      <!-- 左上：不良品概览/总数量 -->
      <section class="panel defect-overview">
        <div class="panel-header">
          <h3>7天内不良品项目占比</h3>
          <span class="badge">总数量</span>
        </div>
        <div class="panel-body defect-body">
          <div class="metric-card">
            <div class="metric-label">最多不良品项</div>
            <div class="metric-value">12.3</div>
          </div>
          <div class="metric-card">
            <div class="metric-label">最多不良品项占比</div>
            <div class="metric-value">123.4</div>
          </div>
          <div ref="defectChartEl" class="chart-placeholder" style="height: 170px"></div>
        </div>
      </section>

      <!-- 中上：生产日报表 -->
      <section class="panel production-table">
        <div class="panel-header">
          <h3>生产日报表</h3>
        </div>
        <div class="panel-body table-wrapper" ref="prodWrap" @mouseenter="pauseScroll('prod')"
          @mouseleave="resumeScroll('prod')">
          <table class="table">
            <thead>
              <tr>
                <th>日期</th>
                <th>产品</th>
                <th>报工数量</th>
                <th>良品数</th>
                <th>不良品数</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(row, i) in productionRows" :key="i">
                <td>{{ row.date }}</td>
                <td>{{ row.product }}</td>
                <td>{{ row.workCount }}</td>
                <td>{{ row.goodQty }}</td>
                <td>{{ row.badQty }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      <!-- 右上：四个KPI卡片 -->
      <section class="panel kpi-list">
        <div class="panel-body kpi-grid">
          <div class="kpi-item">
            <div class="kpi-icon">🧩</div>
            <div class="kpi-content">
              <div class="kpi-label">装配工单总数量</div>
              <div class="kpi-value">1234km</div>
            </div>
          </div>
          <div class="kpi-item">
            <div class="kpi-icon">🏭</div>
            <div class="kpi-content">
              <div class="kpi-label">生产计划总数量</div>
              <div class="kpi-value">6523km</div>
            </div>
          </div>
          <div class="kpi-item">
            <div class="kpi-icon">🧾</div>
            <div class="kpi-content">
              <div class="kpi-label">销售订单总数量</div>
              <div class="kpi-value">7186km</div>
            </div>
          </div>
          <div class="kpi-item">
            <div class="kpi-icon">➕</div>
            <div class="kpi-content">
              <div class="kpi-label">合计总数量</div>
              <div class="kpi-value">8937km</div>
            </div>
          </div>
        </div>
      </section>

      <!-- 中左：员工绩效Top5 -->
      <section class="panel employee-top">
        <div class="panel-header">
          <h3>员工绩效Top5</h3>
        </div>
        <div class="panel-body chart-area">
          <div ref="employeeTopEl" class="chart-placeholder" style="height: 220px"></div>
        </div>
      </section>

      <!-- 中中：良品率 + 销售订单占比 -->
      <section class="panel rate-panels">
        <div class="panel-body donut-grid">
          <div class="donut-item">
            <div class="donut" aria-label="良品率">60%</div>
            <div class="donut-label">良品率</div>
          </div>
          <div class="donut-item">
            <div class="donut" aria-label="销售订单占比">60%</div>
            <div class="donut-label">销售订单占比</div>
          </div>
        </div>
      </section>

      <!-- 中右：工序计划数Top5 -->
      <section class="panel plan-top">
        <div class="panel-header">
          <h3>工序计划数Top5</h3>
        </div>
        <div class="panel-body chart-area">
          <div ref="planTopEl" class="chart-placeholder" style="height: 210px"></div>
        </div>
      </section>

      <!-- 下左：工序报工数Top5 -->
      <section class="panel report-top">
        <div class="panel-header">
          <h3>工序报工数Top5</h3>
        </div>
        <div class="panel-body chart-area">
          <div ref="reportTopEl" class="chart-placeholder" style="height: 210px"></div>
        </div>
      </section>

      <!-- 下右：工单表格 -->
      <section class="panel workorder-table">
        <div class="panel-header">
          <h3>工单进度概览</h3>
        </div>
        <div class="panel-body table-wrapper" ref="woWrap" @mouseenter="pauseScroll('wo')"
          @mouseleave="resumeScroll('wo')">
          <table class="table">
            <thead>
              <tr>
                <th>工单编号</th>
                <th>状态</th>
                <th>产品编号</th>
                <th>产品名称</th>
                <th>产品规格</th>
                <th>计划数量</th>
                <th>实际数量</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(wo, i) in workOrders" :key="'wo'+i">
                <td>{{ wo.orderNo }}</td>
                <td>
                  <span class="status-chip" :class="statusClass(wo.approveStatus)">{{ wo.approveStatus || '-' }}</span>
                </td>
                <td>{{ wo.productCode }}</td>
                <td>{{ wo.productName }}</td>
                <td>{{ wo.productSpec }}</td>
                <td>{{ wo.plannedQty }}</td>
                <td>{{ wo.actualQty }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref, computed, nextTick } from 'vue'
import { MES_XHY_ApiHost } from '@/utils/Interceptors'
import * as echarts from 'echarts/core'
import {
  BarChart,
  LineChart,
  PieChart
} from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

// 注册必要的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  LineChart,
  PieChart,
  CanvasRenderer
])

const currentDate = ref<string>('')
const currentTime = ref<string>('')
let timer: number | undefined
let dataTimer: number | undefined
let prodScrollTimer: number | undefined
let woScrollTimer: number | undefined

const prodWrap = ref<HTMLElement | null>(null)
const woWrap = ref<HTMLElement | null>(null)
// 图表 refs 与实例（静态演示）
const employeeTopEl = ref<HTMLDivElement | null>(null)
const defectChartEl = ref<HTMLDivElement | null>(null)
const planTopEl = ref<HTMLDivElement | null>(null)
const reportTopEl = ref<HTMLDivElement | null>(null)

let employeeTopChart: echarts.ECharts | null = null
let defectChart: echarts.ECharts | null = null
let planTopChart: echarts.ECharts | null = null
let reportTopChart: echarts.ECharts | null = null
const scrollPaused = ref<{ prod: boolean; wo: boolean }>({ prod: false, wo: false })

function updateNow() {
  const now = new Date()
  const yyyy = now.getFullYear()
  const mm = String(now.getMonth() + 1).padStart(2, '0')
  const dd = String(now.getDate()).padStart(2, '0')
  const HH = String(now.getHours()).padStart(2, '0')
  const MM = String(now.getMinutes()).padStart(2, '0')
  const SS = String(now.getSeconds()).padStart(2, '0')
  currentDate.value = `${yyyy}-${mm}-${dd}`
  currentTime.value = `${HH}:${MM}:${SS}`
}

// 初始化 员工绩效Top5 演示柱状图
function initEmployeeTopDemo() {
  if (!employeeTopEl.value) return
  if (!employeeTopChart) {
    employeeTopChart = echarts.init(employeeTopEl.value)
  }
  const names = ['张三', '李四', '王五', '赵六', '孙七']
  const values = [5000, 2600, 1500, 1300, 1250]
  employeeTopChart.setOption({
    grid: { left: 48, right: 24, top: 20, bottom: 32 },
    tooltip: { trigger: 'axis' },
    xAxis: {
      type: 'category',
      data: names,
      axisLabel: { color: '#bfe7ff' },
      axisLine: { lineStyle: { color: 'rgba(58,160,230,.5)' } }
    },
    yAxis: {
      type: 'value',
      axisLabel: { color: '#bfe7ff' },
      splitLine: { lineStyle: { color: 'rgba(58,160,230,.2)' } }
    },
    series: [{
      type: 'bar',
      data: values,
      barWidth: 28,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#22e6ff' },
          { offset: 1, color: '#0a6fb3' }
        ])
      },
      label: { show: true, position: 'top', color: '#d7efff', fontWeight: '700' }
    }]
  })
  window.addEventListener('resize', handleEmployeeTopResize)
}

function handleEmployeeTopResize() {
  employeeTopChart?.resize()
}

// 不良品占比-演示环形图
function initDefectPieDemo() {
  if (!defectChartEl.value) return
  if (!defectChart) defectChart = echarts.init(defectChartEl.value)
  const data = [
    { name: '划伤', value: 35 },
    { name: '变形', value: 28 },
    { name: '掉漆', value: 20 },
    { name: '尺寸偏差', value: 12 },
    { name: '其他', value: 8 }
  ]
  defectChart.setOption({
    tooltip: { trigger: 'item' },
    legend: { top: 0, textStyle: { color: '#bfe7ff' } },
    series: [{
      type: 'pie',
      radius: ['45%', '70%'],
      label: { color: '#d7efff' },
      data
    }]
  })
  window.addEventListener('resize', handleDefectResize)
}

function handleDefectResize() {
  defectChart?.resize()
}

// 工序计划Top5-演示折线图
function initPlanTopDemo() {
  if (!planTopEl.value) return
  if (!planTopChart) planTopChart = echarts.init(planTopEl.value)
  const cats = ['切割', '焊接', '喷涂', '装配', '检测']
  const vals = [800, 650, 520, 480, 420]
  planTopChart.setOption({
    grid: { left: 48, right: 24, top: 20, bottom: 32 },
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: cats, axisLabel: { color: '#bfe7ff' } },
    yAxis: { type: 'value', axisLabel: { color: '#bfe7ff' }, splitLine: { lineStyle: { color: 'rgba(58,160,230,.2)' } } },
    series: [{ type: 'line', data: vals, smooth: true, itemStyle: { color: '#67e8f9' } }]
  })
  window.addEventListener('resize', handlePlanResize)
}

function handlePlanResize() {
  planTopChart?.resize()
}

// 工序报工Top5-演示折线图
function initReportTopDemo() {
  if (!reportTopEl.value) return
  if (!reportTopChart) reportTopChart = echarts.init(reportTopEl.value)
  const cats = ['切割', '焊接', '喷涂', '装配', '检测']
  const vals = [700, 600, 510, 500, 430]
  reportTopChart.setOption({
    grid: { left: 48, right: 24, top: 20, bottom: 32 },
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: cats, axisLabel: { color: '#bfe7ff' } },
    yAxis: { type: 'value', axisLabel: { color: '#bfe7ff' }, splitLine: { lineStyle: { color: 'rgba(58,160,230,.2)' } } },
    series: [{ type: 'line', data: vals, smooth: true, itemStyle: { color: '#a7f3d0' } }]
  })
  window.addEventListener('resize', handleReportResize)
}

function handleReportResize() {
  reportTopChart?.resize()
}

// ---------- 数据类型与状态 ----------
type WorkOrder = {
  orderNo: string
  approveStatus?: string
  productCode: string
  productName: string
  productSpec: string
  plannedQty: number
  actualQty: number
  goodQty: number
  badQty: number
  createTime?: string
  productAlias?: string
  workCount?: number
}

const allOrders = ref<WorkOrder[]>([])

// 生产日报表：取最近6条按创建时间倒序
const productionRows = computed(() => {
  const rows = [...allOrders.value]
    .sort((a, b) => new Date(b.createTime || '').getTime() - new Date(a.createTime || '').getTime())
    .slice(0, 6)
    .map(o => ({
      date: (o.createTime || '').slice(0, 10),
      product: o.productAlias || o.productName || o.productCode,
      workCount: o.workCount ?? 0,
      goodQty: o.goodQty,
      badQty: o.badQty,
    }))
  return rows
})

// 工单进度概览表
const workOrders = computed(() => allOrders.value.slice(0, 12))

function statusClass(status?: string) {
  if (!status) return 'pending'
  if (status.includes('已') || status.includes('完成') || status.includes('通过')) return 'done'
  if (status.includes('待') || status.includes('未') || status.includes('驳回')) return 'pending'
  return 'running'
}

async function fetchAllWorkOrders() {
  try {
    const res = await MES_XHY_ApiHost.get('/api/CompletionOrder/GetAllWorkOrders')
    const raw = res.data
    const list = Array.isArray(raw)
      ? raw
      : Array.isArray(raw?.data)
        ? raw.data
        : Array.isArray(raw?.Data)
          ? raw.Data
          : Array.isArray(raw?.result)
            ? raw.result
            : []

    allOrders.value = list.map((x: any): WorkOrder => ({
      orderNo: x.OrderNo ?? x.orderNo ?? '-',
      approveStatus: x.ApproveStatus ?? x.approveStatus ?? '',
      productCode: x.ProductCode ?? x.productCode ?? '-',
      productName: x.ProductName ?? '-',
      productAlias: x.Product ?? x.product ?? '',
      productSpec: x.ProductSpec ?? x.productSpec ?? '-',
      plannedQty: Number(x.PlannedQty ?? x.plannedQty ?? 0),
      actualQty: Number(x.ActualQty ?? x.actualQty ?? 0),
      goodQty: Number(x.GoodQty ?? x.goodQty ?? 0),
      badQty: Number(x.BadQty ?? x.badQty ?? 0),
      createTime: x.CreateTime ?? x.createTime ?? '',
      workCount: Number(x.WorkCount ?? x.workCount ?? 0),
    }))
    // 数据更新后，等待DOM刷新再重新启动滚动
    await nextTick()
    restartAutoScroll()
  } catch (err) {
    console.error('获取工单数据失败', err)
    allOrders.value = []
  }
}

function stepScroll(wrapper: HTMLElement, amount = 1) {
  if (!wrapper) return
  const max = wrapper.scrollHeight - wrapper.clientHeight
  if (max <= 0) return
  if (wrapper.scrollTop >= max) {
    wrapper.scrollTop = 0
  } else {
    wrapper.scrollTop += amount
  }
}

function startAutoScroll() {
  // 生产日报
  if (prodScrollTimer) window.clearInterval(prodScrollTimer)
  if (prodWrap.value) {
    prodScrollTimer = window.setInterval(() => {
      if (!scrollPaused.value.prod) stepScroll(prodWrap.value as HTMLElement, 1)
    }, 40)
  }
  // 工单表
  if (woScrollTimer) window.clearInterval(woScrollTimer)
  if (woWrap.value) {
    woScrollTimer = window.setInterval(() => {
      if (!scrollPaused.value.wo) stepScroll(woWrap.value as HTMLElement, 1)
    }, 30)
  }
}

function stopAutoScroll() {
  if (prodScrollTimer) window.clearInterval(prodScrollTimer)
  if (woScrollTimer) window.clearInterval(woScrollTimer)
}

function restartAutoScroll() {
  stopAutoScroll()
  startAutoScroll()
}

function pauseScroll(which: 'prod' | 'wo') {
  scrollPaused.value[which] = true
}

function resumeScroll(which: 'prod' | 'wo') {
  scrollPaused.value[which] = false
}

onMounted(() => {
  document.title = '车间生产管控大屏 - MES系统'
  updateNow()
  timer = window.setInterval(updateNow, 1000)
  fetchAllWorkOrders()
  // 定时刷新数据
  dataTimer = window.setInterval(fetchAllWorkOrders, 30000)
  // 启动自动滚动
  nextTick().then(() => {
    startAutoScroll()
    initEmployeeTopDemo()
    initDefectPieDemo()
    initPlanTopDemo()
    initReportTopDemo()
  })
})

onUnmounted(() => {
  if (timer) window.clearInterval(timer)
  if (dataTimer) window.clearInterval(dataTimer)
  stopAutoScroll()
  // 释放演示图表
  employeeTopChart?.dispose(); employeeTopChart = null
  window.removeEventListener('resize', handleEmployeeTopResize)
  defectChart?.dispose(); defectChart = null
  planTopChart?.dispose(); planTopChart = null
  reportTopChart?.dispose(); reportTopChart = null
  window.removeEventListener('resize', handleDefectResize)
  window.removeEventListener('resize', handlePlanResize)
  window.removeEventListener('resize', handleReportResize)
})
</script>

<style scoped>
/* 背景与全局 */
.scale-90 {
  /* Chromium/Edge */
  zoom: 0.9;
}
.scale-85 {
  zoom: 0.85;
}
.scale-80 {
  zoom: 0.8;
}
@supports not (zoom: 1) {
  .scale-90 {
    /* Fallback for browsers without zoom */
    transform: scale(0.9);
    transform-origin: top left;
    /* Maintain full viewport width after scale */
    width: calc(100% / 0.9);
  }
  .scale-85 {
    transform: scale(0.85);
    transform-origin: top left;
    width: calc(100% / 0.85);
  }
  .scale-80 {
    transform: scale(0.8);
    transform-origin: top left;
    width: calc(100% / 0.8);
  }
}

.screen-container {
  min-height: 100vh;
  padding: 10px 12px 12px 12px;
  background: radial-gradient(1200px 600px at 50% -100px, rgba(0, 194, 255, 0.12), transparent 70%), #081c2b;
  color: #d7efff;
}

/* 顶部栏 */
.screen-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  margin-bottom: 6px;
  border: 1px solid rgba(0, 201, 255, 0.25);
  background: linear-gradient(180deg, rgba(8, 43, 66, 0.85) 0%, rgba(6, 28, 44, 0.85) 100%);
  box-shadow: 0 0 20px rgba(0, 201, 255, 0.08) inset;
}

.screen-title {
  font-size: 24px;
  letter-spacing: 1px;
  color: #a6e7ff;
  text-shadow: 0 0 8px rgba(0, 201, 255, 0.3);
  margin: 0;
}

.header-time {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #7dd3fc;
}

.header-time .date {
  font-weight: 600;
}

.header-time .time {
  font-size: 15px;
}

/* 网格布局 */
.screen-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    'defect-overview production-table kpi-cards'
    'employee-top rate-panels plan-top'
    'report-top workorder-table workorder-table';
  gap: 6px;
}

.panel {
  border: 1px solid rgba(58, 160, 230, 0.35);
  background: linear-gradient(180deg, rgba(10, 42, 61, 0.9) 0%, rgba(7, 31, 47, 0.9) 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35), 0 0 24px rgba(0, 201, 255, 0.04) inset;
  border-radius: 6px;
  overflow: hidden;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: rgba(0, 133, 204, 0.15);
  border-bottom: 1px solid rgba(58, 160, 230, 0.3);
}

.panel-header h3 {
  margin: 0;
  font-size: 14px;
  color: #b9ecff;
}

.badge {
  font-size: 11px;
  color: #67e8f9;
  border: 1px solid rgba(103, 232, 249, 0.5);
  padding: 1px 6px;
  border-radius: 999px;
}

.panel-body {
  padding: 10px;
}

/* 区域绑定 */
.defect-overview {
  grid-area: defect-overview;
}

.production-table {
  grid-area: production-table;
}

.kpi-list {
  grid-area: kpi-cards;
}

.employee-top {
  grid-area: employee-top;
}

.rate-panels {
  grid-area: rate-panels;
}

.plan-top {
  grid-area: plan-top;
}

.report-top {
  grid-area: report-top;
}

.workorder-table {
  grid-area: workorder-table;
}

/* 左上不良品概览 */
.defect-body {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: min-content;
  gap: 8px;
}

.metric-card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 10px;
  background: rgba(4, 111, 178, 0.15);
  border: 1px solid rgba(58, 160, 230, 0.25);
}

.metric-label {
  color: #93c5fd;
}

.metric-value {
  font-size: 20px;
  font-weight: 700;
  color: #22d3ee;
}

.chart-placeholder {
  height: 160px;
  border: 1px dashed rgba(125, 211, 252, 0.35);
  color: rgba(186, 230, 253, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* KPI 列表 */
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.kpi-item {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(58, 160, 230, 0.25);
  background: rgba(0, 133, 204, 0.12);
}

.kpi-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: radial-gradient(circle, rgba(0, 201, 255, 0.3), rgba(0, 201, 255, 0.05));
}

.kpi-content .kpi-label {
  font-size: 11px;
  color: #93c5fd;
}

.kpi-value {
  font-size: 16px;
  font-weight: 700;
  color: #a7f3d0;
}

/* 中部 donut */
.donut-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  align-items: center;
}

.donut-item {
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  gap: 6px;
}

.donut {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #22d3ee;
  font-weight: 800;
  font-size: 18px;
  background:
    radial-gradient(circle 44px, transparent 60%, rgba(8, 28, 43, 0.9) 61%),
    conic-gradient(#22d3ee 0 60%, rgba(15, 118, 110, 0.6) 60% 100%),
    radial-gradient(circle at 50% 50%, rgba(0, 201, 255, 0.2), rgba(0,0,0,0) 70%);
  border: 1px solid rgba(58, 160, 230, 0.35);
}

.donut-label {
  color: #bfe7ff;
}

/* 图表/占位区通用 */
.chart-area { padding: 6px 8px 8px 8px; }

/* 表格 */
.table-wrapper { overflow: auto; scrollbar-width: none; }
.table-wrapper::-webkit-scrollbar { display: none; }

/* 固定高度以出现滚动区域（更进一步压缩） */
.production-table .table-wrapper { max-height: 150px; }
.workorder-table .table-wrapper { max-height: 180px; }

.table {
  width: 100%;
  border-collapse: separate; /* 为了支持 thead sticky */
  border-spacing: 0;
  color: #d7efff;
}

.table thead th {
  text-align: left;
  font-weight: 600;
  background: rgba(0, 133, 204, 0.5);
  color: #b9ecff;
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(2px);
}

.table th, .table td {
  border-bottom: 1px solid rgba(58, 160, 230, 0.25);
  padding: 5px 7px;
  white-space: nowrap;
}

.status-chip {
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
}
.status-chip.running { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.35); }
.status-chip.pending { background: rgba(234, 179, 8, 0.2); color: #fde68a; border: 1px solid rgba(234, 179, 8, 0.35); }
.status-chip.done { background: rgba(59, 130, 246, 0.2); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.35); }

/* 响应式 */
@media (max-width: 1200px) {
  .screen-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'defect-overview production-table'
      'kpi-cards kpi-cards'
      'employee-top rate-panels'
      'plan-top report-top'
      'workorder-table workorder-table';
  }
}

@media (max-width: 768px) {
  .screen-title { font-size: 22px; }
  .donut { width: 120px; height: 120px; font-size: 20px; }
}
</style>